<template>
  <div class="home-container">
    <!-- 欢迎部分 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <h1 class="welcome-title">欢迎来到博客后台管理系统</h1>
        <p class="welcome-subtitle">高效、安全、可靠的管理平台</p>
        <div class="welcome-message-box">
          <p class="welcome-message-text">系统采用扫码登录方式，请注意以下事项：</p>
          <ul class="welcome-tips">
            <li><el-icon><Cellphone /></el-icon> <span style="text-decoration: line-through;">请使用微信扫码登录</span></li>
            <li><el-icon><Warning /></el-icon> <span style="text-decoration: line-through;">使用完毕后请及时登出系统</span></li>
            <li><el-icon><Clock /></el-icon> <span style="text-decoration: line-through;">登录二维码有效期为5分钟，过期需重新生成</span></li>
            <li><el-icon><Connection /></el-icon> 请使用安全的网络环境访问</li>
            <li><el-icon><UserFilled /></el-icon>注：由于个人认证的微信公众号原因，不能使用微信扫码登陆，本系统还是采用了账号密码登陆！</li>
          </ul>
          <p class="welcome-message-footer">我们重视您的每一次操作，如有疑问请随时联系技术支持团队。祝您工作愉快！</p>
        </div>
        <div class="welcome-user">
          <el-avatar :size="64" icon="UserFilled"></el-avatar>
          <div class="welcome-message">
            <p class="welcome-greeting">您好，欢迎您！</p>
            <p class="welcome-time">当前时间: {{ currentTime }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统介绍 -->
    <div class="system-intro">
      <div class="card-header">
        <h2 class="card-title">系统介绍</h2>
      </div>
      
      <el-card shadow="hover" class="intro-card">
        <div class="intro-content">
          <div class="highlight-notice">
            <el-alert
              title="整个系统只写了一两句SQL语句，几乎全是直接编码完成！"
              type="success"
              :closable="false"
              show-icon
              effect="dark"
            />
          </div>
          
          <div class="system-features">
            <p class="intro-text">
              博客系统具备以下特色功能：
            </p>
            <ul class="feature-list">
              <li>
                <el-icon><Cellphone /></el-icon>
                <span><span style="text-decoration: line-through;">微信扫码登录功能，提供安全便捷的用户体验</span></span>
              </li>
              <li>
                <el-icon><Document /></el-icon>
                <span>融入 Markdown 组件，方便内容创作与编辑</span>
              </li>
              <li>
                <el-icon><SetUp /></el-icon>
                <span>采用 Element Plus 构建美观界面，响应式设计适配多种设备</span>
              </li>
              <li>
                <el-icon><Connection /></el-icon>
                <span>后端依托 Spring Boot 3、MyBatis Plus 3 和 Redis 技术栈</span>
              </li>
            </ul>
          </div>
          
          <div class="business-info">
            <p class="intro-text">业务内容：</p>
            <div class="business-cards">
              <el-card class="business-card" shadow="hover">
                <template #header>
                  <div class="business-card-header">
                    <el-icon><ShoppingCart /></el-icon>
                    <span>项目购买</span>
                  </div>
                </template>
                <div class="business-card-content">
                  提供优质项目源码和技术解决方案
                </div>
              </el-card>
              
              <el-card class="business-card" shadow="hover">
                <template #header>
                  <div class="business-card-header">
                    <el-icon><Reading /></el-icon>
                    <span>作业与毕业设计辅导</span>
                  </div>
                </template>
                <div class="business-card-content">
                  专业技术团队提供全程指导和技术支持
                </div>
              </el-card>
              
              <el-card class="business-card" shadow="hover">
                <template #header>
                  <div class="business-card-header">
                    <el-icon><Document /></el-icon>
                    <span>软著代理</span>
                  </div>
                </template>
                <div class="business-card-content">
                  高效办理软件著作权登记服务
                </div>
              </el-card>
            </div>
          </div>
          
          <div class="contact-info">
            <div class="contact-title">合作联系方式</div>
            <div class="contact-card">
              <el-icon><ChatDotRound /></el-icon>
              <div class="contact-details">
                <strong>微信：</strong> 
                <span class="contact-value">793686633</span>
                <strong class="contact-admin">系统管理员</strong>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 技术栈介绍 -->
    <div class="tech-stack-section">
      <el-card shadow="hover">
        <template #header>
          <div class="card-header-inner">
            <h3>项目技术栈</h3>
          </div>
        </template>
        <div class="tech-stack-content">
          <div class="tech-stack-container">
            <div class="tech-stack-group">
              <h4>前端技术栈</h4>
              <div class="tech-tags">
                <el-tag class="tech-tag" type="success">Vue 3</el-tag>
                <el-tag class="tech-tag" type="success">Vue Router</el-tag>
                <el-tag class="tech-tag" type="success">Pinia</el-tag>
                <el-tag class="tech-tag" type="success">Element Plus</el-tag>
                <el-tag class="tech-tag" type="success">Echarts</el-tag>
                <el-tag class="tech-tag" type="success">Axios</el-tag>
                <el-tag class="tech-tag" type="success">Less</el-tag>
              </div>
            </div>
            <div class="tech-stack-group">
              <h4>后端技术栈</h4>
              <div class="tech-tags">
                <el-tag class="tech-tag" type="primary">Spring Boot</el-tag>
                <el-tag class="tech-tag" type="primary">MyBatis Plus</el-tag>
                <el-tag class="tech-tag" type="primary">JWT</el-tag>
                <el-tag class="tech-tag" type="primary">Redis</el-tag>
                <el-tag class="tech-tag" type="primary">MySQL</el-tag>
                <el-tag class="tech-tag" type="primary">Elasticsearch</el-tag>
                <el-tag class="tech-tag" type="primary">Minio</el-tag>
                <el-tag class="tech-tag" type="primary">SpringDoc OpenAPI</el-tag>
              </div>
            </div>
            <div class="tech-stack-group">
              <h4>其他技术</h4>
              <div class="tech-tags">
                <el-tag class="tech-tag" type="warning">Druid</el-tag>
                <el-tag class="tech-tag" type="warning">Caffeine</el-tag>
                <el-tag class="tech-tag" type="warning">IP2Region</el-tag>
                <el-tag class="tech-tag" type="warning">微信公众号</el-tag>
                <el-tag class="tech-tag" type="warning">Freemarker</el-tag>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据统计图表 -->
    <div class="chart-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="chart-header">
                <h3>近7天用户注册量</h3>
              </div>
            </template>
            <div ref="registerChartRef" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover" class="chart-card">
            <template #header>
              <div class="chart-header">
                <h3>近7天系统访问量</h3>
              </div>
            </template>
            <div ref="viewChartRef" class="chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { UserFilled, View, Calendar, Warning, Connection, Cellphone, Clock, 
         Document, SetUp, ShoppingCart, Reading, ChatDotRound } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { getRegisterCount, getViewCount } from '@/api/home';

// 当前时间
const currentTime = ref(formatDateTime(new Date()));
let timer = null;

// 定义数据和图表实例
const registerChartRef = ref(null);
const viewChartRef = ref(null);
let registerChart = null;
let viewChart = null;
const todayActivity = ref('活跃');

// 格式化日期时间
function formatDateTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

// 更新时间
function updateTime() {
  currentTime.value = formatDateTime(new Date());
}

// 初始化注册量图表
function initRegisterChart(data) {
  if (!registerChartRef.value) return;
  
  registerChart = echarts.init(registerChartRef.value);
  
  const dates = Object.keys(data).sort();
  const values = dates.map(date => data[date]);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '注册量',
        type: 'bar',
        barWidth: '60%',
        data: values,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' }
            ])
          }
        }
      }
    ]
  };
  
  registerChart.setOption(option);
}

// 初始化访问量图表
function initViewChart(data) {
  if (!viewChartRef.value) return;
  
  viewChart = echarts.init(viewChartRef.value);
  
  const dates = Object.keys(data).sort();
  const values = dates.map(date => data[date]);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      boundaryGap: false
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '访问量',
        type: 'line',
        data: values,
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
          color: '#5470c6'
        },
        itemStyle: {
          color: '#5470c6'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
            { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
          ])
        }
      }
    ]
  };
  
  viewChart.setOption(option);
}

// 获取图表数据
async function fetchChartData() {
  try {
    // 获取注册量数据
    const registerRes = await getRegisterCount();
    if (registerRes && registerRes.data) {
      initRegisterChart(registerRes.data);
    }
    
    // 获取访问量数据
    const viewRes = await getViewCount();
    if (viewRes && viewRes.data) {
      initViewChart(viewRes.data);
    }
  } catch (error) {
    console.error('获取图表数据失败:', error);
  }
}

// 处理窗口大小变化
function handleResize() {
  registerChart && registerChart.resize();
  viewChart && viewChart.resize();
}

onMounted(() => {
   

  
  // 设置定时更新时间
  timer = setInterval(updateTime, 1000);
  
  // 获取图表数据
  fetchChartData();
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  // 清除定时器
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  
  // 销毁图表实例
  if (registerChart) {
    registerChart.dispose();
    registerChart = null;
  }
  
  if (viewChart) {
    viewChart.dispose();
    viewChart = null;
  }
  
  // 移除事件监听
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="less">
.home-container {
  
  .welcome-section {
    margin-bottom: 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1890ff, #36cfc9);
    padding: 30px;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    .welcome-content {
      max-width: 800px;
      margin: 0 auto;
      
      .welcome-title {
        font-size: 28px;
        margin: 0 0 10px 0;
        font-weight: 600;
      }
      
      .welcome-subtitle {
        font-size: 18px;
        opacity: 0.9;
        margin: 0 0 20px 0;
      }
      
      .welcome-message-box {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 20px;
        backdrop-filter: blur(5px);
        
        .welcome-message-text {
          font-size: 16px;
          margin: 0 0 10px 0;
        }
        
        .welcome-tips {
          list-style: none;
          padding: 0;
          margin: 0 0 10px 0;
          
          li {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            font-size: 14px;
            
            .el-icon {
              margin-right: 8px;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.9);
            }
          }
        }
        
        .welcome-message-footer {
          font-size: 14px;
          font-style: italic;
          margin: 0;
          opacity: 0.9;
        }
      }
      
      .welcome-user {
        display: flex;
        align-items: center;
        
        .welcome-message {
          margin-left: 15px;
          
          .welcome-greeting {
            font-size: 18px;
            margin: 0 0 5px 0;
            font-weight: 500;
          }
          
          .welcome-time {
            font-size: 14px;
            opacity: 0.8;
            margin: 0;
          }
        }
      }
    }
  }
  
  .system-intro {
    margin-bottom: 20px;
    
    .card-header {
      margin-bottom: 15px;
      
      .card-title {
        font-size: 20px;
        margin: 0;
        color: #333;
      }
    }
    
    .intro-card {
      margin-bottom: 20px;
      
      .intro-content {
        .highlight-notice {
          margin-bottom: 20px;
          
          :deep(.el-alert) {
            font-size: 16px;
            font-weight: bold;
          }
          
          :deep(.el-alert__title) {
            font-size: 16px;
            font-weight: bold;
          }
          
          :deep(.el-alert__icon) {
            font-size: 18px;
          }
        }
        
        .system-features {
          margin-bottom: 25px;
          
          .intro-text {
            font-size: 16px;
            color: #333;
            margin: 0 0 15px 0;
            font-weight: 500;
          }
          
          .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
            
            li {
              display: flex;
              align-items: center;
              padding: 10px 0;
              border-bottom: 1px dashed #eee;
              
              &:last-child {
                border-bottom: none;
              }
              
              .el-icon {
                margin-right: 10px;
                font-size: 18px;
                color: #409EFF;
              }
              
              span {
                font-size: 15px;
                color: #333;
              }
            }
          }
        }
        
        .business-info {
          margin-bottom: 25px;
          
          .intro-text {
            font-size: 16px;
            color: #333;
            margin: 0 0 15px 0;
            font-weight: 500;
          }
          
          .business-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            
            .business-card {
              flex: 1;
              min-width: 250px;
              transition: transform 0.3s;
              
              &:hover {
                transform: translateY(-5px);
              }
              
              .business-card-header {
                display: flex;
                align-items: center;
                
                .el-icon {
                  margin-right: 8px;
                  font-size: 16px;
                  color: #409EFF;
                }
                
                span {
                  font-size: 15px;
                  font-weight: 500;
                }
              }
              
              .business-card-content {
                padding: 10px 0;
                color: #666;
              }
            }
          }
        }
        
        .contact-info {
          .contact-title {
            font-size: 16px;
            color: #333;
            margin: 0 0 15px 0;
            font-weight: 500;
          }
          
          .contact-card {
            display: flex;
            align-items: center;
            background-color: #f5f7fa;
            border-radius: 8px;
            padding: 15px;
            
            .el-icon {
              font-size: 24px;
              color: #409EFF;
              margin-right: 15px;
            }
            
            .contact-details {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              
              strong {
                color: #333;
                margin-right: 8px;
              }
              
              .contact-value {
                font-size: 18px;
                font-weight: bold;
                color: #409EFF;
                margin-right: 15px;
              }
              
              .contact-admin {
                background-color: #409EFF;
                color: white;
                font-size: 14px;
                padding: 2px 8px;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
  
  .tech-stack-section {
    margin-bottom: 20px;
    
    .card-header-inner {
      h3 {
        margin: 0;
        font-size: 18px;
        color: #333;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        
      }
    }
    
    .tech-stack-content {
      .tech-stack-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        
        .tech-stack-group {
          flex: 1;
          min-width: 250px;
          
          h4 {
            font-size: 16px;
            margin: 0 0 10px 0;
            color: #555;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
          }
          
          .tech-tags {
            display: flex;
            flex-wrap: wrap;
            
            .tech-tag {
              margin: 0 8px 8px 0;
              padding: 5px 12px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  
  .chart-container {
    margin-bottom: 20px;
    
    .chart-card {
      margin-bottom: 20px;
      
      .chart-header {
        h3 {
          margin: 0;
          font-size: 16px;
          color: #333;
        }
      }
      
      .chart {
        height: 350px;
      }
    }
  }
}
</style>
      